// If you don't want to use TypeScript you can delete this file!
import * as React from "react"
import { Link } from "gatsby"
import { List } from 'antd'
import type { BlogItem } from '../types/blog'

export type BlogListType = {
  list: BlogItem[]
}

const BlogList: React.FC<BlogListType> = ({list}) => {
  return (
    <>
      <List
        itemLayout="horizontal"
        dataSource={list}
        renderItem={(item:BlogItem) => (
          <List.Item key={item.node.id}>
            <List.Item.Meta
              title={<Link to={item.node.fields.slug}>{item.node.frontmatter.title}</Link>}
              description={item.node.frontmatter.date}
            />
            <div>{item.node.frontmatter.description}</div>
          </List.Item>
        )}
      />
    </>
  )
}

export default BlogList
